﻿/***************************************************************************
 * <copyright file="Kinect-1.8.0.css" company="Microsoft">                 
 *	 Copyright 2013 Microsoft Corporation 
 * 	 
 *	Licensed under the Apache License, Version 2.0 (the "License"); 
 *	you may not use this file except in compliance with the License.
 *	You may obtain a copy of the License at
 * 	 
 *		 http://www.apache.org/licenses/LICENSE-2.0 
 * 	 
 *	Unless required by applicable law or agreed to in writing, software 
 *	distributed under the License is distributed on an "AS IS" BASIS,
 *	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
 *	See the License for the specific language governing permissions and 
 *	limitations under the License. 
 * </copyright>                                                            
 ***************************************************************************/

.kinect-button {
    margin: 10px;
    display: inline-block;
    padding: 25px;
    height: 200px;
    width: 200px;
    position: relative;
    font-family: 'Segoe UI';
    font-size: 16pt;
    font-weight: 600;
}

.kinect-button.small {
    height: 120px;
    width: 120px;
    font-size: 12pt;
    font-weight: 500;
}

.kinect-button.medium {
    height: 200px;
    width: 200px;
    font-size: 16pt;
    font-weight: 600;
}

.kinect-button.large {
    height: 300px;
    width: 300px;
    font-size: 20pt;
    font-weight: 600;
}

.kinect-button-surface {
    position: relative;
    left: 3%;
    top: 3%;
    width: 94%;
    height: 94%;
    transition: left 0.16s, top 0.16s, width 0.16s, height 0.16s;
}

.kinect-button-text {
    position: absolute;
    left: 0px;
    top: 50%;
    height: 20pt;
    width: 100%;
    margin-top: -10pt;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
            
.button-hover .kinect-button-surface {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    transition: left 0.16s, top 0.16s, width 0.16s, height 0.16s;
}

.button-pressed .kinect-button-surface {
    left: 7.5%;
    top: 7.5%;
    width: 85%;
    height: 85%;
    transition: left 0.10s, top 0.10s, width 0.10s, height 0.10s;
}

.kinect-button.tile .kinect-button-surface {
    border: none;
    background: linear-gradient(to bottom, #511c74, #311040);
    color: white;
}

#kinect-cursor {
    position: absolute;
    display: none;
    width: 120px;
    height: 120px;
}

/* normal cursor state */
#kinect-cursor-glow {
    stroke-opacity: 0.0;
}

#kinect-cursor-normal {
    stroke-opacity: 1.0;
    fill-opacity: 1.0;
}

#cursor-progress {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

#kinect-cursor-extended {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

/* hover cursor state */
.cursor-hover #kinect-cursor-glow {
    stroke-opacity: 1.0;
}

.cursor-hover #kinect-cursor-progress {
    stroke-opacity: 1.0;
    fill-opacity: 1.0;
}

/* pressed cursor state */
.cursor-pressed #kinect-cursor-normal {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

.cursor-pressed #kinect-cursor-progress {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

.cursor-pressed #kinect-cursor-extended {
    stroke-opacity: 1.0;
    fill-opacity: 1.0;
}